<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>demo18-原生js tab标签页</title>

    <style>

        *{padding: 0;margin: 0;}
        ul{height: 30px;margin-bottom: 10px;}
        ul li{cursor:pointer;list-style-type: none;height: 30px;line-height: 30px;padding: 0 15px;border:1px solid #abcdef;float: left;margin-right: 3px;}
        ul li.current{background: #abcdef}
        #content div{width: 300px;height: 200px;border: 1px solid #abcdef;display: none;}
        body{margin: 50px;}

        #content div.show{display: block;}
    </style>

</head>
<body>
    <ul id="ul">
        <li class="current">php</li>
        <li>ruby</li>
        <li>python</li>
    </ul>
    <div id="content">
        <div class="show">1111</div>
        <div>2222</div>
        <div>3333</div>
    </div>
</body>
</html>

<script>
    var ul  = document.getElementById('ul');
    var li = ul.getElementsByTagName('li');
    var content = document.getElementById('content');

    var div = content.getElementsByTagName('div');


    for(var i=0;i<li.length;i++){

        li[i].index = i;

        li[i].addEventListener('click', function () {

            for(var j=0;j<li.length;j++){
                li[j].className = "none";

                div[j].className = "hide";
            }
            this.className = "current";
            div[this.index].className = "show";

        })

    }




</script>